<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <p><labe<label>l>用户名：<input type="text"><br/></label>
    <label>密码<input type="password"><br></label>
    <label>性别<select name="" id=""><option value="男"></option></select></label><br/>
    <label>爱好<input type="check" name="" id="">篮球</label><br/>
    <label>是否已婚<input type="radio">已婚<input type="radio">未婚</label><br/>
    <label>简介</label><textarea></textarea></p> -->
</body>

</html>
<script>
    var arr = [{

            label: "用户名",

            name: "username",

            type: "text"

        }, {

            label: "密码",

            name: "password",

            type: "password"

        }, {

            label: "性别",

            name: "gender",

            type: "select",

            value: ['男', '女', '不男', '不女', 'Gay', '妖王']

        }, {

            label: "爱好",

            name: "hobby",

            type: "checkbox",

            value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

        }, {

            label: '是否已婚',

            name: 'married',

            type: 'radio',

            value: ['已婚', '未婚']

        },
        {

            label: '简介',

            name: 'resume',

            type: 'textarea'

        }
    ];
    //根据数据生成表单   
    //1)生成select下拉框
    //<label>xx</label><select><option></option></select>
    //2)checkbox/radio  
    //<label>xx</label><label><input type = "checkbox/radio">篮球</label>
    //3)其他情况
    //<label>xx</label><input type = "text">
    //4)生成多行文本框
    //<label>xx</label><textarea></textarea>
    //遍历数据,根据类型不同生成不同的html结构

    for (var i = 0; i < arr.length; i++) {

        var p = document.createElement("p");

        //生成label标签
        // document.createElement在文档流里面创建一个元素节点
        var label = document.createElement("label");
        //label包裹的内容
        label.innerHTML = arr[i].label;
        //添加label的for属性
        label.for = arr[i].name;

        //声明变量
        var input;

        switch (arr[i].type) {
            //select
            case 'select':
                //生成select标签
                // document.createElement在文档流里面创建一个元素节点
                input = document.createElement("select");
                input.id = arr[i].name;
                input.name = arr[i].name;

                //生成下拉选项
                for (var j = 0; j < arr[i].value.length; j++) {
                    var opt = document.createElement("option");
                    opt.value = arr[i].value[j];
                    //这个是option包裹的内容
                    opt.innerHTML = arr[i].value[j];
                    //把option放进select里面
                    input.appendChild(opt);
                }
                break;
                //textarea
            case 'textarea':
                input = document.createElement("textarea");
                input.id = arr[i].name;
                input.name = arr[i].name;
                break;

                // checkbox/radio
            case 'checkbox':
            case 'radio':
                //生成一个span标签,用来包裹所有的
                input = document.createElement("span");

                //循环value值,把所有的选项的生成html结构
                for (var j = 0; j < arr[i].value.length; j++) {
                    var item = document.createElement("label");
                    var checkbox = document.createElement("input");

                    //设置类型
                    checkbox.type = arr[i].type;
                    checkbox.name = arr[i].name;
                    item.appendChild(checkbox); //<label><input type = "checkbox/radio"></label>

                    //设置文本节点
                    var txt = document.createTextNode(arr[i].value[j]);
                    item.appendChild(txt); //<label><input type = "checkbox/radio">篮球</label>
                    input.appendChild(item);
                }
                break;
                // text/password
            default:

                input = document.createElement("input");
                input.tpye = arr[i].type;
                input.id = arr[i].name;
                input.name = arr[i].name;
        }
        //把label 和 input标签放到p里面
        p.appendChild(label);
        p.appendChild(input);

        //把p标签放到文档body里面
        document.body.appendChild(p);

    }
</script>